<template>
    <div class="accounting">
        <img
            src="https://xzcs-video.oss-cn-beijing.aliyuncs.com/seo_m/user_bj.png"
            alt="用户"
            class="user-bj"
        />

        <div class="user" @click="goUser">
            <img
                :src="
                    userInfo
                        ? userInfo.avatar
                        : 'https://xzcs-video.oss-cn-beijing.aliyuncs.com/assets/img/avatar.png'
                "
                alt="头像"
                class="avatar"
            />
            <div class="info">
                <div class="name">
                    {{ userInfo ? userInfo.nickname : "登录 / 注册" }}
                </div>
                <div class="text">
                    {{
                        userInfo ? userInfo.bio : "完成登录/注册后享用更多功能"
                    }}
                </div>
            </div>
        </div>

        <div class="cell">
            <van-cell
                v-for="(item, index) in cellList"
                :key="index"
                :title="item.name"
                :icon="item.icon"
                is-link
                @click="goTo(item)"
            >
            </van-cell>
        </div>
    </div>
</template>

<script>
import { ImagePreview, Dialog, Toast } from "vant";
import { mapState, mapMutations } from "vuex";
import { downLoadAPP } from "@/assets/utils/utils.js";
import { logout } from "@/assets/api/indexApi.js";
export default {
    async asyncData({ params, query }) {
        let data = {};

        return data;
    },

    head() {
        return {
            title: "个人中心-【小竹财税平台】",
            meta: [],
        };
    },
    layout: "home",
    components: {},
    data() {
        return {
            cellList: [
                {
                    name: "我的收藏",
                    icon: "https://xzcs-video.oss-cn-beijing.aliyuncs.com/seo_m/cell_1.png",
                    to: "",
                },
                // {
                //     name: '财税工具',
                //     icon: "https://xzcs-video.oss-cn-beijing.aliyuncs.com/seo_m/cell_2.png",
                //     to: ''
                // },

                {
                    name: "联系我们",
                    icon: "https://xzcs-video.oss-cn-beijing.aliyuncs.com/seo_m/cell_3.png",
                    to: "",
                },
                {
                    name: "下载APP",
                    icon: "https://xzcs-video.oss-cn-beijing.aliyuncs.com/seo_m/cell_4.png",
                    to: "",
                },
                {
                    name: "关注公众号",
                    icon: "https://xzcs-video.oss-cn-beijing.aliyuncs.com/seo_m/cell_5.png",
                    to: "",
                },
                {
                    name: "退出登录",
                    icon: "https://xzcs-video.oss-cn-beijing.aliyuncs.com/seo_m/cell_6.png",
                    to: "",
                },
            ],
        };
    },
    computed: {
        ...mapState("common", {
            userInfo: (state) => state.userInfo,
        }),
    },
    created() {},
    mounted() {},
    watch: {},
    methods: {
        ...mapMutations("common", ["setuserInfo"]),
        goTo(item) {
            if (item.name == "联系我们") {
                window.open(
                    "https://work.weixin.qq.com/kfid/kfcdd5adbdac303debd"
                );
                return;
            } else if (item.name == "关注公众号") {
                ImagePreview([
                    "https://xzcs-video.oss-cn-beijing.aliyuncs.com/seo_m/wechat_code.png",
                ]);
                return;
            } else if (item.name == "我的收藏") {
                if (!this.userInfo) {
                    Dialog.confirm({
                        title: "提示",
                        message: "该功能需要登录后使用",
                        confirmButtonText: "去登录",
                        cancelButtonText: "再看看",
                    })
                        .then(() => {
                            this.$router.push({
                                path: "/login",
                                query: {
                                    url:
                                        window.location.pathname +
                                        window.location.search,
                                },
                            });
                        })
                        .catch(() => {
                            // on cancel
                        });
                } else this.$router.push({ path: "/user/mycollect" });
            } else if (item.name == "下载APP") {
                downLoadAPP();
            } else if (item.name == "退出登录") {
                if (this.userInfo) {
                    let that = this;
                    Dialog.confirm({
                        title: "提示",
                        message: "是否退出登录",
                        confirmButtonText: "退出",
                        cancelButtonText: "取消",
                    })
                        .then(() => {
                            that.logout();
                        })
                        .catch(() => {
                            // on cancel
                        });
                }
            }
        },

        async logout() {
            const id = this.userInfo.id;
            const res = await logout({});
            Toast("已退出登录");
            this.setuserInfo(null);
            localStorage.removeItem("token");
            localStorage.removeItem("userInfo");
            this.$router.push({ path: "/" });
        },

        goUser() {
            if (this.userInfo) {
                this.$router.push({
                    path: "/user/myset",
                });
            } else {
                this.$router.push({
                    path: "/login",
                    query: {
                        url: window.location.pathname + window.location.search,
                    },
                });
            }
        },
    },
};
</script>

<style lang="scss" scoped>
.accounting {
    padding-top: 1.6rem;
}
.user-bj {
    position: fixed;
    width: 100%;
    height: auto;
    top: 0;
    left: 0;
    z-index: 1;
}

.user {
    position: relative;
    z-index: 100;
    width: 90%;
    margin: 0 auto;
    display: flex;
    align-items: center;
    img {
        width: 3.75rem;
        height: 3.75rem;
        object-fit: cover;
        border-radius: 3.75rem;
        margin-right: 0.87rem;
    }
    .info {
        .name {
            font-weight: 500;
            font-size: 1.25rem;
            color: #333333;
        }
        .text {
            font-weight: 400;
            font-size: 0.81rem;
            color: #999999;
            padding-top: 0.6rem;
        }
    }
}

.cell {
    width: 90%;
    margin: 2rem auto 0;
    background-color: #ffffffff;
    position: relative;
    z-index: 100;
}

::v-deep .van-cell {
    padding-top: 0.8rem;
    padding-bottom: 0.8rem;
}

::v-deep .van-cell__left-icon {
    position: relative;
    top: 0.2rem;
    left: -0.2rem;
}
</style>